/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 17:17:02
 * @version: v1.0.0
 * @Descripttion: 节点页面设置
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-16 22:29:38
 * @Auditor: 
 */
import React, { useState, useEffect, useContext } from 'react';
import { Collapse, Dropdown, Switch, Menu, Checkbox } from 'antd';
import context from '../context';
import { createBpmnXMLNode, BPMN_NODE_TYPE, updateUserTask } from './../../../utils/bpmnUtils';
import { UserTaskSelfProps } from './../../../interface';
import styles from './../style.module.scss';

const MItem = Menu.Item;
const T = window.$app.t;
const isTrueStr = (strBoolean?: string | boolean) => strBoolean === 'true' || strBoolean === true;

export default () => {
  const { self, modeler } = useContext(context);
  const [show, setShow] = useState(false);
  const [required, setRequired] = useState(false);
  const [enable, setEnable] = useState(false);
  const [commentShow, setCommentShow] = useState(false);
  const [commonRequired, setCommonRequired] = useState(false);

  const _self = self as UserTaskSelfProps;
 
  useEffect(() => {
    const arr = _self.businessObject?.extensionElements?.values?.[3]?.values || [];
    const data = arr.length ? {...arr[0]} : {};
   
    setShow(isTrueStr(data.show));
    setRequired(isTrueStr(data.require));
    setEnable(isTrueStr(data.enable));
    setCommentShow(isTrueStr(data.commentShow));
    setCommonRequired(isTrueStr(data.commentRequire));
  }, [_self]);

  useEffect(() => {
    const data = Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_PAGE_SET), {
      values: [
        Object.assign(createBpmnXMLNode(modeler,BPMN_NODE_TYPE.HL_ATTACHMENT), { 
          require: required, 
          show, 
          enable,
          commentShow,
          commentRequire: commonRequired
        })
      ]
    })
    updateUserTask(modeler, self as UserTaskSelfProps, 3, data)
  }, [show, required, enable, commentShow, commonRequired, self, modeler])

  const FileDropdownMenu = (
    <Menu>
      <MItem>
        <Checkbox onChange={(e) => setShow(e.target.checked)} checked={show}>{T('display')}</Checkbox>
      </MItem>
      <MItem>
        <Checkbox onChange={(e) => setRequired(e.target.checked)} checked={required}>{T('required')}</Checkbox>
      </MItem>
    </Menu>
  );

  const RemarksDropdownMenu = (
    <Menu>
      <MItem>
        <Checkbox onChange={(e) => setCommentShow(e.target.checked)} checked={commentShow}>{T('display')}</Checkbox>
      </MItem>
      <MItem>
        <Checkbox onChange={(e) => setCommonRequired(e.target.checked)} checked={commonRequired}>{T('required')}</Checkbox>
      </MItem>
    </Menu>
  );

  return (
    <div className={styles.resetCollapse}>
      <Collapse>
        <Collapse.Panel header={T('file')} key='panel' extra={
          <span onClick={e => e.stopPropagation()}>
            <Switch checked={enable} onChange={e => setEnable(e)}/>
          </span>
        }>
          <ul className={styles.pageSetList}>
            <li>
              <p>
                <span>{T('uploadFile')}</span>
                <span className={styles.pageSetDesc}>
                  {show && T('display')} {required && T('required')}
                </span>
              </p>
              <Dropdown overlay={FileDropdownMenu}>
                <span className={styles.selectAttr}>{T('selectAttr')}</span>
              </Dropdown>
            </li>
            <li>
              <p>
                <span>{T('comment')}</span>
                <span className={styles.pageSetDesc}>{commentShow && T('display')} {commonRequired && T('required')}</span>
              </p>
              <Dropdown overlay={RemarksDropdownMenu}>
                <span className={styles.selectAttr}>{T('selectAttr')}</span>
              </Dropdown>
            </li>
          </ul>
        </Collapse.Panel>
      </Collapse>
    </div>
  )
}
